%section
  %a.scroll-target{name: 'icons'}
  %h3.color-black Icons
  %p
    All icons are using Google's
    = link_to 'Materialize Font', 'https://design.google.com/icons', target: '_'
    = "and can be easily added to any page using the ruby helper or an <i> element."
    %br/
    %em.font-smaller Note: Icon names with more than one word must be connected with an underscore.

  .panel.panel--padded
    - ['volume_up', 'volume_down', 'volume_mute', 'volume_off'].each do |icon|
      %p
        = i(icon)
      %code.expandable
        = expandable_toggle
        %p= "<i class='material-icon'>#{icon}</i>"
        %br/
        %p
          %span.color-primary Ruby:
          = "i('#{icon}')"
